<template>
  <section class="page speech-template">
    <data-form :model="dataModel" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="模板编号" prop="templateCode">
          <el-input v-model="dataModel.templateCode"></el-input>
        </el-form-item>
        <el-form-item label="模板名称" prop="templateName">
          <el-input v-model="dataModel.templateName"></el-input>
        </el-form-item>
        <el-form-item label="模板状态" prop="templateStatus">
          <el-select v-model="dataModel.templateStatus" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('CommonState')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>

    <data-box @onPageChange="refreshData" :data="templateDataSet" :page="pageService">
      <template slot="buttons">
        <el-button @click="clientObj = null, dialog.modify = true;" v-auth="1612">新增话术模板</el-button>
      </template>
      <!--数据列区域-->
      <template slot="columns">
        <el-table-column prop="cupoName" label="操作" :min-width="$helper.getColumnWidth(3)">
          <template slot-scope="scope">
            <el-button type="text" @click="clientObj=scope.row, dialog.modify = true" v-auth="250">修改</el-button>
            <el-button type="text" @click="deleteTemplate(scope.row)" v-auth="251">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="templateCode" label="模板编号" :min-width="$helper.getColumnWidth(2)">
        </el-table-column>
        <el-table-column prop="templateName" label="模板名称" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="overduePeriod" label="逾期期数" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="templateStatus" label="状态" :formatter="(row) => $filter.dictConvert(row.templateStatus,'CommonState')" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" :formatter="(row) => $filter.dateTimeFormat(row.createTime)" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="operatorRealName" label="操作人" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
      </template>
    </data-box>
    <!--新增/修改模板配置-->
    <el-dialog title="话术模板" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" :visible.sync="dialog.modify" @open="$nextTick(() => $refs['modify-speech-template'].refresh())">
      <modify-speech-template :data="clientObj" ref="modify-speech-template" @close="dialog.modify = false, refreshData()"></modify-speech-template>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import DataForm from "~/components/common/data-form.vue";
import DataBox from "~/components/common/data-box.vue";
import ModifySpeechTemplate from "~/components/template-manage/message-template/modify-speech-template.vue";
import { TemplateService } from "~/services/domain-service/template.service";
import { State, Getter, Action } from "vuex-class";
@Auth(1607)
@Layout("workspace")
@Component({
  components: {
    ModifySpeechTemplate
  }
})
export default class SpeechTemlate extends Vue {

  @Dependencies(SortService) private sortService: SortService;
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(TemplateService) private templateService: TemplateService;

  private templateDataSet: any[] = [];
  private templateModel: any = {};

  private dialog: any = {
    modify: false
  };
  private clientObj: any = null;

  private dataModel: any = {
    templateName: "",
    templateCode: "",
    templateCategory: "SPEECH",
    templateStyle: "",
    templateStatus: "",
    templateContent: "",
    id: ""
  };

  private refreshData() {
    this.templateService
      .getTemplatesByCondition(
        this.dataModel,
        this.pageService,
        this.sortService
      )
      .subscribe(data => {
        this.templateDataSet = data;
      });
  }

  private mounted() {
    this.refreshData();
  }

  //删除模板
  private deleteTemplate(rowData) {
    this.$confirm(`您确定要删除该模板吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      this.templateService.deleteTemplateById(rowData.id)
        .subscribe((data) => {
          this.$message.success('删除成功');
          this.refreshData();
        });
    });
  }
}
</script>
<style scoped lang="less">
</style>